<template>
  <div
    class="rvideo-container scroll-container"
    v-infinite-scroll="loadData"
    infinite-scroll-distance="2"
    :infinite-scroll-immediate="false"
    :infinite-scroll-disabled="disabled"
    style="overflow: auto">
    <h4 class="title">视频分类</h4>
    <div class="type">
      <button
        @click="changeRank(index)"
        v-for="(item, index) in type"
        :key="item"
        :class="{
          'is-active': index == active,
        }">
        {{ item }}
      </button>
    </div>
    <h4 class="title all">全部mv</h4>
    <Mv :mvs="currentList" />
    <div
      v-show="isLoading"
      v-loading="isLoading"
      :element-loading-background="bg"
      element-loading-text="加载中，请勿继续滚动！"
      :element-loading-spinner="Svg"
      class="tip"></div>
  </div>
</template>

<script lang="ts" setup>
import { inject, reactive, ref, Ref } from 'vue';
import { elMessage, getTheme } from '../utils/util';
import { elMessageType } from '../model/enum';
import { getMv } from '../api/api';
import { MV, Svg } from '../model';
import Mv from '../components/Mv.vue';

//配置主题
const color = getTheme().get('fontColor');
const boxShadow = getTheme().get('boxShadow');
const colorBlack = getTheme().get('fontBlack');
const bg = getTheme().get('background');

//当前活跃的榜单
const active = ref<number>(0);
//初始展示视频的数量
const dataNum = ref<number>(40);
//是否禁用滚动加载
const disabled = ref<boolean>(false);
//存放mv数据的容器
const mvs = reactive<MV[][]>([]);
//mv分类
const type = reactive<string[]>([
  '全部',
  '韩国',
  '日本',
  '欧美',
  '港台',
  '内地',
]);
//展示mv的数量
const nums = reactive<number[]>([1000, 1000, 1000, 1000, 1000, 1000]);
//加载动画
const isLoading = ref<boolean>(false);
//当前展示列表
let currentList = reactive<MV[]>([]);

//页面加载动画
const first = inject<Ref<boolean>>('firstLoading');
first!.value = true;

//修改分类排行榜
const changeRank = (index: number) => {
  active.value = index;
  dataNum.value = 40;
  currentList = reactive<MV[]>([]);
  currentList.push(...mvs[active.value].slice(0, dataNum.value));
  disabled.value = false;
};

//加载数据
const loadData = () => {
  if (dataNum.value < nums[active.value]) {
    isLoading.value = true;
    disabled.value = true;
    setTimeout(() => {
      dataNum.value += 10;
      currentList.push(
        ...mvs[active.value].slice(currentList.length, dataNum.value)
      );
      isLoading.value = false;
      disabled.value = false;
    }, 2500);
  } else {
    isLoading.value = true;
    disabled.value = true;
    setTimeout(() => {
      isLoading.value = false;
      dataNum.value = nums[active.value];
      currentList.push(
        ...mvs[active.value].slice(currentList.length, dataNum.value)
      );
      elMessage(elMessageType.SUCCESS, '已经到底啦！');
    }, 2500);
  }
};

//请求序列
const requests: any[] = [];
type.forEach((item, index) => {
  requests.push(getMv(nums[index], item));
});

//请求数据

Promise.all(requests)
  .then((results: any) => {
    results.forEach((response: any) => {
      const list = reactive<MV[]>([]);
      const { data } = response;
      data.forEach((item: any) => {
        const { id, name, cover, playCount, artistName } = item;
        list.push({
          id: id as string,
          name: name as string,
          image: cover as string,
          playCount: playCount as string,
          artist: artistName as string,
        });
      });
      mvs.push(list);
    });
    //添加初始数据
    currentList.push(...mvs[active.value].slice(0, dataNum.value));
    first!.value = false;
  })
  .catch((err: any) => {
    elMessage(elMessageType.ERROR, err.message);
  });
</script>

<style lang="less" scoped>
@font-color: v-bind(color);
@font-color-light-black: v-bind(colorBlack);
@shadow: v-bind(boxShadow);
@font-color-gray: #7b7b7b;
@font-color-green: #1ed2a9;

.rvideo-container {
  overflow-x: hidden !important;
  .type {
    width: 81vw;
    margin: 15px 0;
    padding-left: 6.6px;
    button {
      margin-right: 10px;
      font-size: 14px;
      letter-spacing: 1px;
      outline: none;
      border: none;
      width: 90px;
      height: 35px;
      border-radius: 17.5px;
      box-shadow: @shadow;
      &:hover {
        color: @font-color-green;
        background: rgba(220, 220, 220, 0.6);
      }
    }
  }
  .tip {
    width: 81vw;
    height: 50px;
    margin: 10px 0;
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: @font-color;
  }

  .is-active {
    background-color: #1ed2a9 !important;
    color: #ffffff !important;
  }

  .title {
    color: @font-color;
    font-size: 20px;
    font-weight: 520;
    width: 81vw;
    padding-left: 6.6px;
  }

  .mv {
    &:deep(.title) {
      font-size: 20px;
    }
  }
}
</style>
